<template>
  <div class="wish-bg">
    <div class="wish-star1"></div>
    <div class="wish-star2"></div>
    <div class="wish-star3"></div>
    <div class="wish-star4"></div>
    <div class="wish-rightleaf"></div>
    <div class="wish-leftleaf"></div>
    <shooting-star />
    <div class="wish-container">
      <div class="wish-toptext"></div>
      <div
        v-for="(item, index) in wishinfo"
        :key="index"
        :class="[
          'wish-item',
          `wish-wish${Number(index) + 1}`,
          { 'wish--choosed': item.choosed },
        ]"
        @click="chooseWish(item)"
      >
        <span>{{ item.wish_name }}</span>
      </div>
      <div class="wish-btn" @click="postUserInfo"></div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data () {
    return {
      wishinfo: []
    }
  },
  created () {
    this.getUserInfo()
    // this.postUserInfo(data)
  },
  // computed: {
  //   wishinfo_new () {
  //     return this.wishinfo.map((item) => )
  //   }
  // },
  methods: {
    postUserInfo () {
      const selectedWishes = this.wishinfo.filter(item => {
        return item.choosed
      })
      const ids = selectedWishes.map(item => {
        return item.wish_id
      })

      const params = { 'wish_ids': ids }
      if (ids.length === 0) {
        this.$toast.fail('你还没有选择任何愿望!')
        return
      }

      Dialog.confirm({
        message: '请确认你的愿望，\n生成后就不能再修改了哦～'
      }).then(async () => {
        const res = await this.$api.Info.postUserInfo(params)
        const { result: num } = res
        this.num = {
          ...num
        }
        if (num.code !== 200) {
          console.log('创建愿望失败!')
        } else {
          console.log(num.msg)
        }
        this.$router.push('./mywish')
      })
    },
    async getUserInfo () {
      const res = await this.$api.Info.getUserInfo()
      const { result: { selection_wishs: { wish_select: wishinfo } } } = res
      this.wishinfo = [
        ...wishinfo
      ]
    },
    chooseWish (item) {
      // this.wishinfo.wish_state = 1
      const wishchoosedList = this.wishinfo.filter(item => {
        return item.choosed
      })
      if (wishchoosedList.length >= 3 && !item.choosed) {
        this.$toast('别贪心，最多只能选择3个愿望哦～')
        return
      }
      item.choosed = !item.choosed
    }

  }
}
</script>

<style lang="scss" scoped>
.wish-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./images/G_bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0 100%;
  overflow: hidden;
}
.wish-star1 {
  position: absolute;
  top: 9.4%;
  left: 0;
  width: 1.42rem;
  height: 1.3rem;
  background-image: url("./images/G_star1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: 12.4%;
    }
    100% {
      top: 9.4%;
    }
  }
}
.wish-star2 {
  position: absolute;
  top: 10.27%;
  left: 48%;
  width: 1.08rem;
  height: 0.54rem;
  background-image: url("./images/G_star2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star2 6s infinite;
  @keyframes star2 {
    50% {
      top: 7.27%;
    }
    100% {
      top: 10.27%;
    }
  }
}
.wish-star3 {
  position: absolute;
  top: 16%;
  right: 1%;
  width: 0.38rem;
  height: 0.21rem;
  background-image: url("./images/G_star3.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star3 6s infinite;
  @keyframes star3 {
    50% {
      top: 11%;
    }
    100% {
      top: 16%;
    }
  }
}
.wish-star4 {
  position: absolute;
  top: 68.7%;
  left: 14.1%;
  width: 0.75rem;
  height: 0.43rem;
  background-image: url("./images/G_star4.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star4 6s infinite;
  @keyframes star4 {
    50% {
      top: 65.7%;
    }
    100% {
      top: 68.7%;
    }
  }
}
.wish-smallstar {
  position: absolute;
  top: 1%;
  left: 3%;
  width: 5.97rem;
  height: 12.61rem;
  background-image: url("./images/G_smallstar.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
  @keyframes smallstart {
    0%,
    100% {
      transform: scale(0.95);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
}
.shooting_star {
  position: absolute;
  bottom: 32.6%;
  left: 0;
  width: 7.5rem;
  height: 8.07rem;
  background-image: url("./images/G_meteor.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;

  @keyframes tail {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes shooting {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100px);
    }
  }
}
.wish-rightleaf {
  position: absolute;
  bottom: -1%;
  right: 0;
  width: 2.31rem;
  height: 4.53rem;
  background-image: url("./images/G_rightleaf.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: leaf 2s linear infinite;
}
.wish-leftleaf {
  position: absolute;
  bottom: -12%;
  left: -1.5%;
  width: 1.91rem;
  height: 4.34rem;
  background-image: url("./images/G_leftleaf.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  animation: leaf 2s linear infinite;
}
@keyframes leaf {
  0% {
    -webkit-transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(355deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.wish-container {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  padding: 0 0.51rem 0 0.54rem;
  text-align: center;
  span {
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 10%;
    left: 5%;
    width: 5.2rem;
    height: 0.5rem;
    line-height: 13px;
  }
  .wish-toptext {
    margin-left: 1.2rem;
    margin-bottom: 0.5rem;
    width: 4.07rem;
    height: 1.07rem;
    background-image: url("./images/G_toptext.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: fadeInLeft 2s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    transform: translateX(-4.4rem);
  }
  .wish-item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wish-wish1 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish5.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    animation: fadeInLeft 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish2 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish2.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    margin-left: 0.65rem;
    animation: fadeInLeft 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish3 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish5.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    animation: fadeInLeft 2s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish4 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish4.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    margin-left: 0.65rem;
    animation: fadeInLeft 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish5 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish5.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    animation: fadeInLeft 2s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish6 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish4.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-left: 0.65rem;
    margin-bottom: 0.1rem;
    animation: fadeInLeft 2s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish7 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish5.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.1rem;
    animation: fadeInLeft 2s;
    animation-delay: 7s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-wish8 {
    width: 5.8rem;
    height: 0.91rem;
    background-image: url("./images/G_wish4.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-left: 0.65rem;
    animation: fadeInLeft 2s;
    animation-delay: 8s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }
  .wish-btn {
    position: fixed;
    top: 90%;
    left: 23.87%;
    width: 3.97rem;
    height: 0.89rem;
    background-image: url("./images/G_btn.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: fadeInLeft 2s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
  }

  .wish--choosed:nth-child(even) {
    background-image: url("./images/G_choosewishleft.png");
    span {
      color: #000;
    }
  }
  .wish--choosed:nth-child(odd) {
    background-image: url("./images/G_choosewishright.png");
    span {
      color: #000;
    }
  }
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-2.2rem);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
</style>
